<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* body{
            overflow: hidden;
        } */
        #container{
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 1380px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        #prev_btn,#next_btn{
            width: 60px;
            height: 60px;
            background: rgba(39, 39, 39, .7);
            display: inline-block;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            position: absolute;
            top: 143px;
            left: 15px;
            z-index: 999;
            cursor: pointer;
        }
        #next_btn{
            position: absolute;
            top: 143px;
            left: 1315px;
        }
        #prev_btn img{
            margin: 7px 5px 0 0;
            width: 45px;
            height: 45px;
        }
        #next_btn img{
            margin: 7px 0 0 5px;
            width: 45px;
            height: 45px;
        }
        /* #banner_container{
            width: 600%;
        } */
        #banner_container{
            position: absolute;
            left: 0;
            /* transition: all .5s; */
            width: 9660px;
        }
        #banner_container li{
            list-style: none;
            float: left;
            width: 1380px;
            height: 350px;
        }
        #banner_container li img{
            width: 1380px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 左右按钮 -->
        <a id="prev_btn"><img src="img/zuo-copy.png" /></a>
        <a id="next_btn"><img src="img/you-copy.png" /></a>
        <!-- 图片 -->
        <ul id="banner_container">
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        /* 
            切换思路：
                * 6张图片，最后一张为第1张
                * 当点击到第6张，再点击下一张时立刻定位到第1张，并设置第2张的索引值：为1
                * 当点击到第1张，再点击上一张时立刻定位到最后1张，并重设倒数第2张的索引值：为4

        */


        // 构造函数
        function Banner(){
            // 获取元素
            this.prevBtn = document.querySelector('#prev_btn');
            this.nextBtn = document.querySelector('#next_btn');
            this.imgBox = document.querySelector('#banner_container');
            this.imgList = document.querySelectorAll('#banner_container li');
            this.imgW = parseInt(getComputedStyle(this.imgList[0]).width);
            
            
            // 初始化索引值
            this.index = 0;
            
            // 绑定方法
            this.bingEvent();

        }

        // 原型对象
        // 1. 绑定事件
        Banner.prototype.bingEvent = function(){
            var self = this;
            var index_max = self.imgList.length-1;  // 最大索引值为5
            
            // 下一张
            self.nextBtn.onclick = function(){
                if(self.index === index_max){
                    alert('切换到第一张');
                    console.log('change');
                    
                    // 重新定位和重设索引值
                    self.imgBox.style.left = 0;
                    self.index = 1;
                }else{
                    self.index++;
                }
                console.log(self.index);
                self.bannerChange();
            }
            // 上一张
            self.prevBtn.onclick = function(){
                if(self.index === 0){
                    alert('切换到最后一张');
                    console.log('change');
                    
                    self.imgBox.style.left = - index_max * self.imgW + 'px';
                    self.index = index_max-1;   // 倒数第二张，索引值为4
                }else{
                    self.index--;
                }
                console.log(self.index);
                self.bannerChange();
            }
        }
        // 2.移动
        Banner.prototype.bannerChange = function(){
            $(this.imgBox)
            .stop()
            .animate({
                left : -this.index * this.imgW
            },1000)
        }

        // 实例对象
        var banner = new Banner();
    </script>
</body>
</html>